<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>form表单</title>

    <!-- Bootstrap -->
    <link href="bootstrap.min.css" rel="stylesheet">
    <style type="text/css">

    </style>

  </head>
  <body>
    <div class="container">
        <form action="">
            <div class="form-group">
                <label for="em">用户名</label>
                <input type="email" class="form-control" placeholder="email" id="em">
            </div>
            <div class="form-group">
                <label for="">密码</label>
                <input type="password" class="form-control">
            </div>

            <div class="form-group">
                <label for="">File input</label>
                <input type="file">
                <p>请选择您要的文件</p>
            </div>
            <ul>
                <li></li>
            </ul>
            <div class="checkbox">
                <label for="">
                  <input type="checkbox">男
                </label>

            </div>

            <botton type="submit" class="btn btn-default">提交</botton>
        </form>

        <br>
        <form action="" class="form-inline">
          <div class="form-group">
              <label class="sr-only">username</label>
              <div class="input-group">
                  <div class="input-group-addon">$</div>
                  <input type="email" class="form-control" placeholder="金额"/>
                  <div class="input-group-addon">.00</div>
              </div>
          </div>
          <div class="form-group">
              <label class="sr-only">password</label>
              <input class="form-control" type="password" placeholder="password"/>
          </div>
        </form>
        <br>
        <form action="" class="form-horizontal">
            <div class="form-group">
                <label class="sr-only">username</label>
                <div class="input-group">
                    <div class="input-group-addon">$</div>
                    <input type="email" class="form-control" placeholder="金额"/>
                    <div class="input-group-addon">.00</div>
                </div>
            </div>
            <div class="form-group">
                <label class="sr-only">password</label>
                <input class="form-control" type="password" placeholder="password"/>
            </div>
        </form>
        <br>

        <form action="" class="form-horizontal">
            <div class="form-group">
                <label class="col-sm-2 control-label">Email</label>
                <div class="col-sm-10">
                    <input type="email" class="form-control"/>
                </div>
            </div>
        </form>
        <br>
        <form action="" class="form-horizontal">
            <textarea name="" id="" class="form-control"></textarea>
        </form>
        <br>

        <form action="">
            <select name="" id="" class="form-control">
                <option value="">1</option>
                <option value="">2</option>
                <option value="">3</option>
                <option value="">4</option>
                <option value="">5</option>
            </select>
            <br>
            <select multiple name="" id="" class="form-control">
                <option value="">1</option>
                <option value="">2</option>
                <option value="">3</option>
                <option value="">4</option>
                <option value="">5</option>
            </select>
        </form>
        <br>

        <form action="" class="form-horizontal">

            <div class="form-group">
                <label for="" class="col-sm-2 control-label">Email</label>

                <div class="col-sm-10">
                    <p class="form-control-static">doramart@qq.com</p>
                </div>
            </div>
        </form>

        <br>
        <!--焦点状态-->
        <form action="" class="form-horizontal">
            <label for="" class="sr-only">Hello</label>
            <input type="text" class="form-control focus"/>
        </form>

        <br>
        <!--焦点状态-->
        <form action="" class="form-horizontal">
            <label for="" class="sr-only">Hello</label>
            <input class="form-control" type="text" placeholder="Disabled input here..." disabled>
        </form>

        <br>
        <!--焦点状态-->
        <form action="" class="form-horizontal">
            <fieldset disabled>
                <div class="form-group">
                    <label for="" class="col-sm-3 control-label">Hello</label>
                    <div class="col-sm-9">
                        <input class="form-control" type="text" placeholder="Disabled input here1...">
                    </div>
                </div>
                <div class="form-group">
                    <label for="" class="col-sm-3 control-label">Hello</label>
                    <div class="col-sm-9">
                        <input class="form-control" type="text" placeholder="Disabled input here2...">
                    </div>
                </div>
                <div class="form-group">
                    <label for="" class="col-sm-3 control-label">Hello</label>
                    <div class="col-sm-9">
                        <input class="form-control" type="text" placeholder="Disabled input here3...">
                    </div>
                </div>
                <div class="form-group">
                    <label for="" class="col-sm-3 control-label">Hello</label>
                    <div class="col-sm-9">
                        <input class="form-control" type="text" placeholder="Disabled input here4...">
                    </div>
                </div>
                <a href="#">Hello</a>
                <button type="reset" class="btn btn-default">重置</button>
                <div class="form-group">
                    <label for="" class="sr-only">Hello</label>
                    <input type="text" class="form-control" placeholder="这是一个只读输入框" readonly/>
                </div>
            </fieldset>
        </form>

        <br>
        <!--校验状态-->
        <form action="" class="form-horizontal">
            <div class="form-group has-success">
                <label for="" class="control-label">Hello</label>
                <input type="text" class="form-control"/>
            </div>
            <div class="form-group has-error">
                <label for="" class="control-label">Hello</label>
                <input type="text" class="form-control"/>
            </div>
            <div class="form-group has-warning">
                <label for="" class="control-label">Hello</label>
                <input type="text" class="form-control"/>
            </div>
        </form>
        <br/>
        <form action="" class="form-horizontal">
            <div class="form-group has-success has-feedback">
                <label for="" class="control-label">Hello</label>
                <input type="text" class="form-control" placeholder="Hello" aria-describedby="inputsuccess"/>
                <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
            </div>
        </form>

        <!--form尺寸-->
        <br/>
        <form action="" class="form-horizontal">
            <input type="text" class="form-control input-lg" placeholder="大"/>
            <input type="text" class="form-control" placeholder="默认"/>
            <input type="text" class="form-control input-sm" placeholder="小"/>
        </form>

        <!--辅助文本-->
        <br/>
        <form action="" class="form-horizontal">
            <label for="" class="sr-only">Hello</label>
            <input type="text" class="form-control" aria-describedby="helpBlock"/>
            <span id="helpBlock" class="help-block">这是一个输入密码的框，要注意密码位数不可少于6位</span>
        </form>
    </div>  
  </body>
</html>